<template>
  <!-- 商品列表区域 -->
  <div class="shopcard">
    <div class="shopcardlist">
      <div class="mui-card" v-for="(item,i) in  shopcartdata" :key="item.id">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <mt-switch v-model="$store.getters.getgoodsselected[item.id]" @change="selected(item.id,$store.getters.getgoodsselected[item.id])"></mt-switch>
            <img :src="item.thumb_path" />
            <div class="shopcartinfo">
              <h1>{{item.title}}</h1>
              <p>
                <span class="cardprice">￥{{item.sell_price}}</span>
                <numbox :initcount="$store.getters.getgoodscount[item.id]" :goodsid="item.id"></numbox>
                <!-- 问题：如何从购物车中获取商品的数量呢 -->
                <!-- 1. 我们可以先创建一个 空对象，然后循环购物车中所有商品的数据， 把 当前循环这条商品的 Id， 作为 对象 的 属性名，count值作为 对象的 属性值，这样，当把所有的商品循环一遍，就会得到一个对象： { 88: 2, 89: 1, 90: 4 } -->
                <a href="#" @click.prevent="remove(item.id,i)">删除</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 结算区域 -->
    <div class="givemoney">
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner giveM">
            <div class="left">
              <p>总计（不含运费）</p>
              <p>
                已勾选商品
                <span class="red">{{$store.getters.getgoodsprice.count}}</span>件，总价
                <span class="red">￥{{$store.getters.getgoodsprice.total}}</span>元
              </p>
            </div>
            <mt-button type="danger">去结算</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import numbox from "../soncomponent/shopcartnumbox.vue";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      shopcartdata: []
    };
  },
  methods: {
    getshopcartdata() {
      var idArr = [];
      this.$store.state.cart.forEach(item => idArr.push(item.id));
      if (idArr.length <= 0) {
        return;
      }
      this.$http
        .get("api/goods/getshopcarlist/" + idArr.join(","))
        .then(result => {
          if (result.body.status == 0) {
            this.shopcartdata = result.body.message;
          } else {
            Toast("加载轮播图失败");
          }
        });
    },
    remove(id, index) {
      this.shopcartdata.splice(index, 1);
      this.$store.commit("removeformcart", id);
    },
    selected(id,val){
      //更新时把，最新开关状态存储到store中
      this.$store.commit('upataegoosselected',{id,selected:val})
    }
  },
  created() {
    this.getshopcartdata();
  },
  components: {
    numbox
  }
};
</script>

<style lang="scss" scoped>
.shopcard {
  background-color: #eee;
  overflow: hidden;
  .shopcardlist {
    .mui-card-content-inner {
      display: flex;
      align-items: center;
    }
    img {
      width: 60px;
      height: 60px;
    }
    h1 {
      font-size: 13px;
    }
    .shopcartinfo {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .cardprice {
        color: red;
      }
    }
  }
  .giveM {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .red {
      color: red;
      font-weight: bold;
      font-size: 14px;
    }
  }
}
</style>